<template>
    <el-dialog
        title="Dialog"
        :visible.sync="dialogVisible"
        width="80%"
        center
        :before-close="handleClose"
    >
        <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
        >
            <el-form-item label="审批人">
                <el-input
                    v-model="formInline.user"
                    placeholder="审批人"
                />
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select
                    v-model="formInline.region"
                    placeholder="活动区域"
                >
                    <el-option
                        label="区域一"
                        value="shanghai"
                    />
                    <el-option
                        label="区域二"
                        value="beijing"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit"
                >
                    查询
                </el-button>
                <el-button
                    type="primary"
                    @click="onSubmit"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
        >
            <el-table-column
                prop="date"
                label="日期"
            />
            <el-table-column
                prop="name"
                label="姓名"
            />
            <el-table-column 
                prop="address"
                label="地址"
            />
        </el-table>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button @click="btnOk">取 消</el-button>
            <el-button
                type="primary"
                @click="btnOk"
            >确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { reactive, toRefs, watch } from '@vue/composition-api';
import { tableData } from './tableConfig';

export default {
    props: {
        visible: {
            type: Boolean,
        },
    },
    setup (props, context) {
        console.log(props, context);
        const { emit } = context;
        const state = reactive({
            dialogVisible: false,
            tableData,
            formInline: {},
        });
        watch(
            () => props.visible,
            (newVal) => {
                state.dialogVisible = newVal;
            },
        );
        const btnOk = () => {
            state.dialogVisible = false;
            emit('update:visible', false);
        };
        const handleClose = () => btnOk();
        const onSubmit = () => {
            console.log('onSubmit');
        };
        return {
            ...toRefs(state),
            btnOk,
            handleClose,
            onSubmit,
        };
    },
};
</script>

<style>
</style>
